<script setup>
import CommonModal from "../modal/CommonModal.vue";
import { ref } from "vue";
import { updateOrderSubStatus } from "@/api/goods";
import { ElMessage } from "element-plus";
import { useOrder } from "@/store/useOrder";

const orderStore = useOrder();

const props = defineProps({
  orderDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  goodsDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});
const openServiceModalShow = ref(false);
const loading = ref(false);
const openServiceHandle = async () => {
  loading.value = true;
  try {
    await updateOrderSubStatus({
      orderId: props.orderDetails.id,
      stepStatus: 4,
    });
    openServiceModalShow.value = false;
    orderStore.setReloadOrderDetails(true);
    ElMessage.success("操作成功");
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};

const notOpenTemporarily = () => {
  ElMessage.warning("请尽快和买家沟通确认需求后开启服务！");
};
</script>

<template>
  <div class="status">
    <img class="icon" src="@/assets/order-time-icon.png" alt="" />
    <div class="info">
      <h3 class="title">现在开启服务？</h3>
      <p class="confirm-list">是否已获得所有需要的资料？</p>
      <p class="confirm-list">请确认买家已提供所需资料，即可开启服务。</p>
      <p class="btn">
        <button @click="openServiceModalShow = true">资料齐全，开启服务</button>
        <button @click="notOpenTemporarily">暂不开启</button>
      </p>
    </div>
  </div>
  <CommonModal
    v-if="openServiceModalShow"
    title="确认开启服务？"
    cancel-text="再想想"
    confirm-text="确认开启"
    @close="openServiceModalShow = false"
    @confirm="openServiceHandle"
    :loading="loading"
  >
    <template #content>
      <p class="open-modal-text">
        开启服务后，将根据你设定的天数进行倒计时。你需要在规定的时间内完成交付，否则会影响你的准时交付率。
      </p>
    </template>
  </CommonModal>
</template>

<style scoped lang="scss">
.status {
  display: flex;
}
.icon {
  flex: 0 0 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  top: 1px;
}
.info {
  flex: 1;
  .title {
    font-size: 20px;
    color: #191e28;
    margin-bottom: 12px;
  }
  .confirm-list {
    color: rgba(25, 30, 40, 0.48);
    line-height: 24px;
  }
  .btn {
    margin-top: 16px;
    button {
      width: 180px;
      height: 48px;
      background: #1dbf73;
      border-radius: 8px 8px 8px 8px;
      border: none;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      &:nth-child(2) {
        background: #ffffff;
        color: rgba(25, 30, 40, 0.6);
        border: 1px solid rgba(25, 30, 40, 0.08);
        margin-left: 16px;
      }
    }
  }
}
.open-modal-text {
  width: 355px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #191e28;
}
</style>
